<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="bg"></view>
		<view class="panel">
			<view class="head">
				<view class="title">连续签到7天额外赠送{{ store.sign.last }}金币</view>
			</view>
			<view class="day">
				<view :class="sign.num>0?'item active':'item'">
					<view class="circular">
						+{{ store.sign.day_1 }}
					</view>
					<view class="text">第一天</view>
				</view>
				<view :class="sign.num>1?'item active':'item'">
					<view class="circular">
						+{{ store.sign.day_2 }}
					</view>
					<view class="text">第二天</view>
				</view>
				<view :class="sign.num>2?'item active':'item'">
					<view class="circular">
						+{{ store.sign.day_3 }}
					</view>
					<view class="text">第三天</view>
				</view>
				<view :class="sign.num>3?'item active':'item'">
					<view class="circular">
						+{{ store.sign.day_4 }}
					</view>
					<view class="text">第四天</view>
				</view>
				<view :class="sign.num>4?'item active':'item'">
					<view class="circular">
						+{{ store.sign.day_5 }}
					</view>
					<view class="text">第五天</view>
				</view>
				<view :class="sign.num>5?'item active':'item'">
					<view class="circular">
						+{{ store.sign.day_6 }}
					</view>
					<view class="text">第六天</view>
				</view>
				<view :class="sign.num>6?'item active':'item'">
					<view class="circular">
						+{{ store.sign.day_7 }}
					</view>
					<view class="text">第七天</view>
				</view>
			</view>
			<view class="sign">
				<view class="btn" @click="doSign">
					<u-button shape="circle" type="error" icon="play-circle" color="#F22E38" text="立即签到">
					</u-button>
				</view>
			</view>
		</view>
		<view class="panel">
			<view class="head">
				<view class="title">更多任务</view>
			</view>
			<view class="task">
				<view class="item">
					<view class="left">
						<view class="icon">
							<u-icon size="48"
								name="https://img.alicdn.com/imgextra/i2/2064565174/O1CN01u1slxe1o5k314CfxP_!!2064565174.png">
							</u-icon>
						</view>
						<view class="content">
							<view class="title">邀请好友</view>
							<view class="desc">每邀请{{ store.please.number }}位新用户可获得{{ store.please.coin }}金币</view>
						</view>
					</view>
					<view class="right">
						<view class="btn">
							<u-button open-type="share" shape="circle" size="small" color="#F22E38"
								:text="'去完成 '+(userInfo?userInfo.child:0)+'/'+store.please.people">
							</u-button>
						</view>
					</view>
				</view>
				<view class="item" @click="onRewardVideo">
					<view class="left">
						<view class="icon">
							<u-icon size="48"
								name="https://img.alicdn.com/imgextra/i1/2064565174/O1CN01d0qJbF1o5k2yEj8dO_!!2064565174.png">
							</u-icon>
						</view>
						<view class="content">
							<view class="title">观看视频</view>
							<view class="desc">每天{{ store.coin.number }}次，每次奖励{{ store.coin.gift }}金币</view>
						</view>
					</view>
					<view class="right">
						<view class="btn">
							<u-button shape="circle" size="small" color="#F22E38"
								:text="'去完成 '+day_num+'/'+store.coin.number">
							</u-button>
						</view>
					</view>
				</view>
				<view class="item" v-for="(item,index) in applet" @click="onPlayApplet(item)">
					<view class="left">
						<view class="icon">
							<u--image shape="circle" :src="item.image.file_path" width="48" height="48"></u--image>
						</view>
						<view class="content">
							<view class="title">{{ item.title }}</view>
							<view class="desc">{{ item.desc }}</view>
						</view>
					</view>
					<view class="right">
						<view class="btn">
							<u-button shape="circle" size="small" color="#F22E38" text="去完成"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部流量主 -->
		<view class="ad" v-if="spool.video.status == 10">
			<ad :unit-id="spool.video.id" ad-type="video" ad-theme="white"></ad>
		</view>
	</view>
</template>

<script>
	import {
		sign,
		get_sign,
		sign_day_coin,
		detail,
		get_play_applet,
		play_applet
	} from '@/api/user.js';
	import {
		config
	} from '@/api/system.js';
	import {
		insert,
		rewarded
	} from '@/utils/ad.js';
	export default {
		data() {
			return {
				mode: 10, // 10签到  20天天任务 30单个视频
				spool: {},
				store: {},
				sign: [],
				share: {},
				applet: [],
				day_num: 0,
				userInfo: {}
			};
		},
		onShow() {
			this.getUser()
			this.getSign()
		},
		onLoad() {
			this.getShare()
			this.getStore()
			this.getPlayApplet()
		},
		onShareTimeline() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.user_id) {
				referee_id = _this.userInfo.user_id
			}
			return {
				imageUrl: _this.share.cover,
				title: _this.share.title,
				path: '/pages/main/index/index?referee_id=' + referee_id
			}
		},
		onShareAppMessage() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.user_id) {
				referee_id = _this.userInfo.user_id
			}
			return {
				imageUrl: _this.share.cover,
				desc: _this.share.desc,
				title: _this.share.title,
				path: '/pages/main/index/index?referee_id=' + referee_id
			}
		},
		methods: {
			onPlayApplet(item) {
				let _this = this
				uni.navigateToMiniProgram({
					appId: item.app_id,
					path: item.path,
					success: (res) => {
						play_applet({
							play_id: item.play_id
						}).then(res => {
							if (res.code == 1) {
								_this.$refs.uToast.show({
									message: "奖励已到账~!",
									complete() {}
								})
							}
						}).catch(err => {

						})
					}
				})
			},
			getPlayApplet() {
				get_play_applet({}).then(res => {
					this.applet = res.data.applet
				}).catch(err => {

				})
			},
			getShare() {
				config({
					key: 'share'
				}).then(res => {
					this.share = res.data.config
				}).catch(err => {

				})
			},
			getUser() {
				detail({}).then(res => {
					this.userInfo = res.data.userInfo
				}).catch(err => {

				})
			},
			onRewardVideo() {
				let _this = this;
				this.mode = 20
				// 如果是开启激励视频的情况下
				if (this.spool.reward.status == 10) {
					uni.showModal({
						title: '温馨提示',
						content: '观看视频广告后可获得奖励，是否确认继续？',
						success: (res) => {
							if (res.confirm) {
								rewarded.show()
							}
						}
					})
				} else {
					// 如果关闭激励视频
					sign_day_coin({}).then(res => {
						if (res.code == 1) {
							_this.$refs.uToast.show({
								message: "奖励已到账~!",
								complete() {
									_this.getSign()
								}
							})
						}
					}).catch(err => {

					})
				}
			},
			getStore() {
				config({
					key: 'store'
				}).then(res => {
					this.store = res.data.config
					this.getSpool()
				}).catch(err => {

				})
			},
			getSpool() {
				let _this = this;
				config({
					key: 'spool'
				}).then(res => {
					_this.spool = res.data.config
					if (_this.spool.insert.status == 10) {
						insert.load(_this.spool.insert.id)
						insert.show()
					}
					if (_this.spool.reward.status == 10) {
						rewarded.load(_this.spool.reward.id, () => {
							if (_this.mode == 10) {
								_this.onStartSign()
							}
							if (_this.mode == 20) {
								sign_day_coin({}).then(res => {
									if (res.code == 1) {
										_this.$refs.uToast.show({
											message: "奖励已到账~!",
											complete() {
												_this.getSign()
											}
										})
									}
								}).catch(err => {

								})
							}
						})
					}
				}).catch(err => {

				})
			},
			getSign() {
				get_sign({}).then(res => {
					this.sign = res.data.sign
					if (res.data.day_num) {
						this.day_num = res.data.day_num.num
					}
				}).catch(err => {

				})
			},
			doSign() {
				let _this = this
				_this.mode = 10
				// 如果是开启激励视频的情况下
				if (this.spool.reward.status == 10) {
					uni.showModal({
						title: '温馨提示',
						content: '签到需要观看一段广告，是否确认继续？',
						success: (res) => {
							if (res.confirm) {
								rewarded.show()
							}
						}
					})
				} else {
					_this.onStartSign()
				}
			},
			onStartSign() {
				let _this = this
				sign({}).then(res => {
					_this.$refs.uToast.show({
						message: "签到成功~!",
						complete() {
							_this.getSign()
						}
					})
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	.ad {
		margin-top: 15rpx;
	}

	.panel {
		width: 92%;
		background-color: #fff;
		border-radius: 15rpx;
		margin: 0 auto;
		margin-top: 30rpx;

		.task {
			width: 94%;
			margin: 0 auto;
			padding-bottom: 15rpx;

			.item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin: 15rpx 0rpx;
				border-bottom: 1rpx dashed #B9B9B9;
				padding-bottom: 15rpx;

				.left {
					display: flex;
					flex-direction: row;
					align-items: center;

					.icon {
						margin-right: 15rpx;
					}

					.content {
						.title {
							color: #303313;
							font-size: 28rpx;
							font-weight: bold;
						}

						.desc {
							color: #82848a;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.sign {
			width: 94%;
			margin: 0rpx auto;
			padding: 30rpx 0rpx;
		}

		.day {
			width: 94%;
			margin: 0rpx auto;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 15rpx 0rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx 0rpx;
				width: 80rpx;
				background-color: #DCDCDC;
				color: #4F4F4F;
				font-size: 24rpx;
				border-radius: 15rpx;

				.circular {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 60rpx;
					background-color: #B9B9B9;
				}

				.text {
					font-size: 20rpx;
				}
			}

			.active {
				background-color: #FFDEE0;
				color: #F22E38;

				.circular {
					background-color: #F22E38;
					color: #fff;
				}
			}
		}

		.head {
			padding: 30rpx;
			border-bottom: 1rpx solid #DCDCDC;
		}
	}

	.bg {
		width: 100%;
		height: 160rpx;
		background-color: #F22E38;
		border-radius: 0rpx 0rpx 120rpx 120rpx;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		z-index: -1;
	}
</style>
